<template>
  <div>
    <!--<img src="static/image/nianhuoImage/present.png"/>-->
    <div class="cjy-page-body-present-window">
      <div class="cjy-page-body-present-window-box">
        <div class="cjy-page-body-present-window-imagebox">

          <img class="cjy-page-image-box-img" v-lazy="comInfor.mainPic" :key="comInfor.mainPic" @click="gotoDetail" />
          <span class="cjy-title">
                  新春年货大礼包
                </span>
        </div>
        <update-cart :addCartButtonType="0" ref="updateCart">
          <div slot="button" slot-scope="props"
               class="cjy-page-body-present-window-price-box-shadow"
               @click="cartButtonOnClick">
            <div class="cjy-page-body-present-window-price-box">
                <span class="cjy-page-body-present-window-price-ws">
                 {{translatePrice(showWsPrice, 1)[0]}}
                </span>
              <!--<span class="cjy-page-body-present-window-price-ws" style="font-size: 1.5rem">-->
              <!--{{translatePrice(105, 2)[1]}}-->
              <!--</span>-->
              <span class="cjy-page-body-present-window-price-normal">
                  <del>原价{{showNormalPrice}}</del>
                <img src="static/image/nianhuoImage/buynow.png"/></span>
            </div>
            <img class="cjy-page-body-present-window-price-box-shadow-lable"
                 src="static/image/nianhuoImage/nianhuolable.png"/>
          </div>
        </update-cart>

      </div>
    </div>
  </div>
</template>

<script>
  import UpdateCart from '@/real-components/UpdateCart'
  import lazyLoad from 'vue-lazyload'
  import ButtonCangeCart from '@/real-components/ButtonChangeCart/icon'
  import minxinAuto from '../mixinAuto.vue'
  export default {
    mixins: [minxinAuto],
    components: {UpdateCart, ButtonCangeCart},
  }
</script>

<style scoped>
  /*.cjy-page-body-present {*/
  /*margin-top: 0.5rem;*/
  /*}*/

  .cjy-page-body-present-window {
    padding: 0 1.2rem 1rem;
    position: relative;
    margin-top: -1px;
    /*background: rgb(237, 28, 0);*/
  }

  .cjy-page-body-present-window-box {
    width: 100%;
    height: 0;
    position: relative;
    padding-bottom: 67.2%;
  }

  .cjy-page-body-present-window-imagebox {
    width: 100%;
    height: 100%;
    position: absolute;
    background: white;
    overflow: hidden;
    border-radius: 0.5rem;
  }

  .cjy-page-body-present-window-imagebox > .cjy-title {
    position: absolute;
    bottom: 0;
    display: inline-block;
    padding: 0 0.9rem;
    left: 0;
    color: rgb(253, 86, 62);
    font-weight: 600;
  }

  .cjy-page-body-present-window-price-box-shadow {
    position: absolute;
    z-index: 3;
    bottom: -0.2rem;
    right: 0.3rem;
    background: rgb(174, 9, 3);
    padding-bottom: .2rem;
  }

  .cjy-page-body-present-window-price-box {
    background: rgb(210, 20, 25);
    min-width: 5.6rem;
    height: 2rem;
    text-align: left;
    padding: 0 0 0 1.3rem;
  }

  .cjy-page-body-present-window-price-box-shadow, .cjy-page-body-present-window-price-box {
    border-radius: 0.2rem;
  }

  .cjy-page-body-present-window-price-box-shadow-lable {
    position: absolute;
    top: -0.25rem;
    left: 0.3rem;
    width: 0.86rem;
  }

  .cjy-page-body-present-window-price-ws {
    text-align: left;
    display: inline-block;
    line-height: 2rem;
    font-weight: bold;
    font-size: 2rem;
    background: -webkit-linear-gradient(top, white, rgb(255, 251, 188));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .cjy-page-body-present-window-price-normal {
    -webkit-background-clip: text;
    font-size: 0.6rem;
    vertical-align: top;
    padding: 0 0.2rem 1rem;
    display: inline-block;
    min-width: 2.8rem;
    position: relative;
    color: white;
    font-weight: 600;
  }

  .cjy-page-body-present-window-price-normal img {
    width: 2.5rem;
    position: absolute;
    bottom: 0.1rem;
    left: 0;
    right: 0;
    margin: auto;
  }


</style>
